<template>
  <div class="cart">
    <header>
      <ul>
        <li v-for="(item, index) in promise" :key="index">
          <i class="iconfont icon-duigou"></i>
          {{ item }}
        </li>
      </ul>
      <div class="shopnums">
        <div>
          购物数量<span>{{ len }}</span>
        </div>
        <div class="btn">
          <button v-if="ismanage" class="del" @click="del">删除</button>
          <button @click="manage">管理</button>
        </div>
      </div>
    </header>
    <main>
      <div v-if="cartList">
        <van-checkbox-group v-model="result" ref="checkboxGroup">
          <van-checkbox
            :name="item.id"
            v-for="item in cartList"
            :key="item.id"
            class="item"
            @click="showmanage(item)"
          >
            <van-card
              :num="item.nums"
              :price="item.itemPrice"
              :title="item.store_name"
              :thumb="item.image"
              @click="toDetail(item.id)"
            >
              <template #footer>
                <van-button @click.stop="sub(item)">-</van-button>
                <van-button @click.stop="add(item)">+</van-button>
              </template>
            </van-card>
          </van-checkbox>
        </van-checkbox-group>
      </div>
      <div v-if="!cartList || cartList.length == 0">
        <div class="cartList">
          <img
            src="http://47.115.51.185/h5/img/noCart.6f2abfef.png"
            alt=""
            class="imgnull"
          />
        </div>
        <div class="foryou">
          <van-divider
            :style="{
              color: '#000',
              borderColor: '#000',
              padding: '10px 20px',
            }"
          >
            为你推荐
          </van-divider>
          <div class="list">
            <cart-item
              v-for="item in foryou"
              :key="item.id"
              :item="item"
              
            ></cart-item>
          </div>
        </div>
      </div>
      <van-submit-bar
        :price="totalPrice * 100"
        button-text="提交订单"
        v-if="ismanage"
      >
        <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
        <!-- <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template> -->
      </van-submit-bar>
    </main>
  </div>
</template>

<script>
import compHeader from "../components/compHeader.vue";
import { get, post } from "../../utils/util";
import cartItem from "../components/pageCart/cartItem.vue";
import { mapMutations} from "vuex";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import { Dialog } from "vant";
Vue.use(Dialog);
export default {
  name: "pageHome",
  data() {
    return {
      promise: ["100%正品保证", "所有商品精挑细选", "售后无忧"],
      foryou: null,
      cartList: null,
      nums: 0,
      len: 0,
      ismanage: false,
      checked: false,
      result: [],
      totalPrice: 0,
    };
  },
  methods: {
    ...mapMutations(["delCart"]),
    sub(item) {
      --item.nums;
      item.itemPrice = item.price * item.nums;

      if (item.nums < 0) {
        item.itemPrice = 0;
        item.nums = 0;
        return false;
      } else {
        this.totalPrice -= Number(item.price);
      }
    },
    add(item) {
      item.nums++;
      item.itemPrice = item.price * item.nums;
      this.totalPrice += Number(item.price);
    },
    toDetail(id) {
      this.$router.push({ path: "/detail", query: { id: id } });
    },
    manage() {
      this.ismanage = !this.ismanage;
    },
    checkAll() {
      if (this.checked == true) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
      console.log(this.result.length,this.cartList.length);
      if (this.result.length == this.cartList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      if (this.result.length != 0) {
        for (let i = 0; i < this.cartList.length; i++) {
          if (this.cartList[i].check == true) {
          } else {
            this.cartList[i].check = true;
            this.totalPrice += Number(this.cartList[i].itemPrice);
          }
        }
      } else {
        this.totalPrice = 0;
        for (let j = 0; j < this.cartList.length; j++) {
          this.cartList[j].check = false;
        }
      }
    },
    showmanage(item) {
      this.ismanage = true;
      item.check = !item.check;
      console.log(item.check);
      if (item.nums == 0) {
        return false;
      }
      if (item.check) {
        this.totalPrice += Number(item.itemPrice);
      }
      if (!item.check) {
        this.totalPrice -= Number(item.itemPrice);
      }
    },
    del() {
      //确认弹窗
      console.log(this.result);
      Dialog.confirm({
        title: "请确认",
        message: "是否删除",
      })
        .then(() => {
          let cartList = JSON.parse(localStorage.getItem("saveCart"));
          for (let i = 0; i < this.result.length; i++) {
            cartList = cartList.filter((ele) => ele.id != this.result[i]);
            localStorage.setItem("saveCart", JSON.stringify(cartList));
            this.delCart(cartList)
            Toast.success('删除成功');
          }
          this.cartList = cartList;
          if (this.cartList == 0) {
            this.ismanage = false;
          }
          
        })
        .catch(() => {});
    },
  },
  components: {
    "comp-header": compHeader,
    "cart-item": cartItem,
  },
  watch: {
    // ...mapState(["cartList"]),
    cartList(n, o) {
      this.len = this.cartList.length;
    },
  },
  created() {
    get("/index").then((res) => {
      this.foryou = res.data.info.firstList;
    });
    let cartList = JSON.parse(localStorage.getItem("saveCart"));
    this.cartList = cartList;

    // console.log(cartList);
  },
  beforeRouteEnter: (to, from, next) => {
    let token = JSON.parse(localStorage.getItem("token"));
    if (token) {
      next();
    } else {
      next("/login");
    }
  },
};
</script>

<style lang="scss" scoped>
.cart {
  background-color: #f5f5f5;
}
header {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  ul {
    height: 50px;
    line-height: 50px;
    display: flex;
    background-color: #f5f5f5;
    li {
      flex-basis: 33.333%;
      text-align: center;
      i {
        font-size: 10px;
        color: #999;
      }
      font-size: 12px;
      color: #999;
    }
  }
  .shopnums {
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    span {
      padding-left: 5px;
      color: red;
    }
    .btn {
      flex-grow: 0;
      display: flex;
      button {
        background: #fff;
        margin: 0 auto;
      }
      .del {
        color: red;
      }
    }
  }
}
main {
  padding-top: 100px;
  background-color: #fff;
  margin-top: 10px;
  .cartList {
    .imgnull {
      display: block;
      padding-top: 30px;
      width: 250px;
      margin: 0 auto;
    }
  }
  .foryou {
    h3 {
      height: 70px;
      line-height: 70px;
      font-size: 14px;
      text-align: center;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;
      justify-content: space-between;
    }
  }
}
.van-card {
  // transform: translateX(15px);
  margin: 0;
}
.van-card__footer button {
  width: 50px;
  border: 1px solid #9926f7;
  border-radius: 1em;
  font-size: 25px;
}
.item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  position: relative;
  .van-checkbox {
    width: 80px;
    height: 60px;
    position: absolute;
    bottom: -1%;
    left: 0%;
    z-index: 2;
  }
}
</style>